<template>
  <van-swipe v-if="item" class="my-swipe" :autoplay="3000" indicator-color="white" @change="onChange">
    <van-swipe-item v-for="(i,index) in item" :key="index">
        <img :src="i.cover|picUrl" @click="playVideo(i.url)">
    </van-swipe-item>
    <template #indicator>
      <div class="custom-indicator">
          <span class="index">{{ current + 1 }}</span>
          <span class="count"> /{{item.length}}</span>
          </div>
    </template>
  </van-swipe>
</template>

<script>
export default {
  props: {
    item: Array,
  },
  data(){
      return{
          current:0,
      }
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    playVideo(url){
      console.log(url);
      let id = url.replace('newstudios://app.xinpianchang.com/article/','');
      id = id.split('?')
        this.$router.push({ path: "/playvideoview",query:{id:id[0]} },);
    }
  },
};
</script>

<style lang="less" scoped>
.my-swipe {
  color: #fff;
  width: 96%;
  font-size: 20px;
  text-align: center;
  position: relative;
  border-radius: 10px;
  margin: 10px auto;
  img{
      display: block;
  }
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    .index{
        font-size: 20px;
        font-weight: 500;
    }
    .count{
        font-size: 16px;
    }
  }
}
</style>